<template>
  <div class="container" id="category-edit">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">商品管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/goodsList' }">
          <div class="div1">商品列表</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item >
          <div class="div2">新增商品</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 查询 -->
    <div class="content">
      <h2>数据筛选</h2>
        <el-form :inline="true" id="searchForm" :model="searchForm" ref="searchForm">
          <el-form-item label="类目" prop="categoryId">
            <el-cascader
                popper-class="search-category"
                placeholder="请输入商品类目"
                :options="categoryList"
                :show-all-levels=true
                @change="onChangeCategory"
                v-model="categoryId"
                size="mini"
                filterable
                clearable
            ></el-cascader>
          </el-form-item>
        </el-form>
      <h3>选择商品分类</h3>
      <div class="show-category" title="展示" v-if="categoryId && categoryId.length !== 0">
        <span>已选择：</span>
        <el-cascader
          :options="categoryList"
          v-model="categoryId"
          :disabled=true
          separator=" > "
      ></el-cascader>
      </div>
      <el-cascader-panel
          :options="categoryList"
          v-model="categoryId"
      >
      </el-cascader-panel>
      <div class="step"><el-button type="warning" :disabled="categoryId && categoryId.length !== 0 ? false : true" @click="checkUpAttrDataList('goodsEdit', categoryId, 'category' )">下一步</el-button></div>
    </div>
  </div>
</template>

<script>
// import { getClientWidth } from "../../../utils/index.js";
import LbTable from '../../components/lb-table/lb-table'
import BaseList from './components/BaseList.vue'
export default {
  components: {
    LbTable
    // BaseList
  },
  data () {
    return {
      searchForm: {},
      categoryList: [], // 目类列表
      categoryId: '', // 所选 类目 id
      selectionId: [], // 选 中 id
      parArray: [] // 按钮权限
    }
  },
  mounted () { },
  created () {
    this.getCategoryList() // 获取 目类 列表
    // 获取字典值
    // for (let type in this.dictionaries) { this.getDictionaries(type) }
  },
  methods: {
    getButtonTreeDto () {
      // 获取权限设定
      this.limits = JSON.parse(sessionStorage.getItem('limit'))
      const params = this.limits.buttonTreeDto.filter(
        (item) => item.menuCode === 'companyCode'
      )
      params[0].buttonList.forEach((item) => {
        this.parArray.push(item.code)
      })
      console.log(this.parArray)
    },
    // 获取类目列表
    getCategoryList () {
      const params = { pageNo: 1, pageSize: 999 }
      this.$api.categoryList(params).then((res) => {
        this.categoryList = res.data.list
      }).catch((err) => {
        console.log(err)
      })
    },
    // 搜索 选择 类目
    onChangeCategory (val) {
      this.categoryId = val
      console.log(this.categoryId)
      // this.search.classId = val[val.length -1]
      // console.log(val, this.search.classId)
    },
    // 获取 检查 类目商品属性库列表 并 还原 展示 商品属性 表单
    checkUpAttrDataList (name, parameter, type) {
      // console.log(name, parameter, type)
      // this.toOtherPages(name, parameter, type)
      const params = { categoryId: parameter[parameter.length - 1] }
      this.$api.goodsAttrDataList(params).then((res) => {
        const resData = res.data
        // console.log(resData, resData.length, resData[0].itemList.length)
        if (resData && resData.length === 0) {
          this.$message({ type: 'warning', message: '没有设置类目商品属性！' })
          console.log('没有设置类目商品属性！')
          return
        }
        if (resData[0].itemList && resData.itemList === 0) {
          this.$message({ type: 'warning', message: '类目商品属性没有设置完整！' })
          console.log('类目商品属性没有设置完整！')
          return
        }
        // console.log(name, parameter, type)
        this.toOtherPages(name, parameter, type)
      }).catch((err) => {
        console.log(err)
      })
    },
    // 页面跳转
    toOtherPages (name, parameter, type) {
      let query = { id: parameter, type }
      if (type === 'category') { query = { category: parameter, type } }
      this.$router.push({ name, query })
    }
  }
}
</script>
<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

</style>
